<template>
    <!-- The AG Charts component with chartsOptions as an attribute -->
    <ag-charts-vue :options="options"> </ag-charts-vue>
</template>

<script>
    import { ref } from 'vue';
    import { area } from './area.js'
    import { AgChartsVue } from 'ag-charts-vue3';
    import { topology } from './techl.js'
    // Vue Chart Component
    export default {
        name: 'App',
        components: {
            AgChartsVue,
        },
        setup() {
            // Chart Options
            const options = ref({
        data: area,
        topology,
        series: [
          {
            type: "map-shape-background",
          },
          {
            type: "map-shape",
            title: "Access to Clean Fuels",
            idKey: "name",
            colorKey: "value",
            colorName: "% of population",
          },
        ],
        gradientLegend: {
          enabled: true,
          position: "right",
          reverseOrder: true,
          gradient: {
            preferredLength: 200,
            thickness: 2,
          },
          scale: {
            label: {
              fontSize: 10,
              formatter: (p) => p.value + "%",
            },
          },
        },
      },
    );
            return {
                options,
            };
        },
    };
</script>